<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/images/swiper/shouye.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/">
        <img src="~@/assets/images/swiper/fanhui.png">
      </router-link>
    </div>
    <div class="minzuyinyue" @click="swiper(minzuyinyue)">
      <img src="~@/assets/chuantongwenhua/minzuyinyue.png">
    </div>
    <div class="xiangqibingfa" @click="swiper(xiangqibingfa)">
      <img src="~@/assets/chuantongwenhua/xiangqibingfa.png">
    </div>
    <div class="dizigui" @click="swiper(dizigui)">
      <img src="~@/assets/chuantongwenhua/dizigui.png">
    </div>
    <div class="lunhua" @click="swiper(lunhua)">
      <img src="~@/assets/chuantongwenhua/lunhua.png">
    </div>
    <div class="wushu" @click="swiper(wushu)">
      <img src="~@/assets/chuantongwenhua/wushu.png">
    </div>
    <div class="baijiaxing" @click="swiper(baijiaxing)">
      <img src="~@/assets/chuantongwenhua/baijiaxing.png">
    </div>
    <video-play @closeVideo="closeVideo" v-if="isshowvideo" :info="info"></video-play>
  </div>
</template>

<script>
import STATICPATH from '../../config.js'
export default {
  name: 'chuantongwenhua',
  data () {
    return {
      isshowvideo: false,
      info: '',
      minzuyinyue: {
        data: [{
          isSelected: 1,
          name: '龙吟九霄片头',
          url: STATICPATH + '/chuantongwenhua/minzuyinyue/龙吟九霄片头.mp4'
        }]
      },
      xiangqibingfa: {
        data: [{
          isSelected: 1,
          name: '得胜歌动画版',
          url: STATICPATH + '/chuantongwenhua/xiangqibingfa/得胜歌动画版.mp4'
        }]
      },
      dizigui: {
        data: [{
          isSelected: 1,
          name: '弟子规绘本1',
          url: STATICPATH + '/chuantongwenhua/diziguihuiben/弟子规绘本1.mp4'
        }, {
          isSelected: 0,
          name: '弟子规绘本2',
          url: STATICPATH + '/chuantongwenhua/diziguihuiben/弟子规绘本2.mp4'
        }, {
          isSelected: 0,
          name: '弟子规绘本3',
          url: STATICPATH + '/chuantongwenhua/diziguihuiben/弟子规绘本3.mp4'
        }, {
          isSelected: 0,
          name: '弟子规绘本4',
          url: STATICPATH + '/chuantongwenhua/diziguihuiben/弟子规绘本4.mp4'
        }, {
          isSelected: 0,
          name: '弟子规绘本5',
          url: STATICPATH + '/chuantongwenhua/diziguihuiben/弟子规绘本5.mp4'
        }, {
          isSelected: 0,
          name: '弟子规教学版 第二节',
          url: STATICPATH + '/chuantongwenhua/diziguijiaoxue/弟子规教学版 第二节.mp4'
        }, {
          isSelected: 0,
          name: '弟子规教学版 第八节',
          url: STATICPATH + '/chuantongwenhua/diziguijiaoxue/弟子规教学版 第八节.mp4'
        }, {
          isSelected: 0,
          name: '弟子规教学版 第九节',
          url: STATICPATH + '/chuantongwenhua/diziguijiaoxue/弟子规教学版 第九节.mp4'
        }, {
          isSelected: 0,
          name: '弟子规教学版 第十三节',
          url: STATICPATH + '/chuantongwenhua/diziguijiaoxue/弟子规教学版 第十三节.mp4'
        }]
      },
      lunhua: {
        data: [{
          isSelected: 1,
          name: '盛龙轮滑第一课',
          url: STATICPATH + '/chuantongwenhua/lunhua/盛龙轮滑第一课.mp4'
        }, {
          isSelected: 0,
          name: '盛龙轮滑第六课',
          url: STATICPATH + '/chuantongwenhua/lunhua/盛龙轮滑第六课.mp4'
        }]
      },
      wushu: {
        data: [{
          isSelected: 1,
          name: '武术课堂鹤拳2',
          url: STATICPATH + '/chuantongwenhua/wushu/武术课堂鹤拳2.mp4'
        }]
      },
      baijiaxing: {
        data: [{
          isSelected: 1,
          name: '何',
          url: STATICPATH + '/chuantongwenhua/baijiaxing/何.mp4'
        }, {
          isSelected: 0,
          name: '吕',
          url: STATICPATH + '/chuantongwenhua/baijiaxing/吕.mp4'
        }, {
          isSelected: 0,
          name: '吴',
          url: STATICPATH + '/chuantongwenhua/baijiaxing/吴.mp4'
        }, {
          isSelected: 0,
          name: '杨',
          url: STATICPATH + '/chuantongwenhua/baijiaxing/杨.mp4'
        }, {
          isSelected: 0,
          name: '郑',
          url: STATICPATH + '/chuantongwenhua/baijiaxing/郑.mp4'
        }, {
          isSelected: 0,
          name: '朱',
          url: STATICPATH + '/chuantongwenhua/baijiaxing/朱.mp4'
        }]
      }
    }
  },
  methods: {
    swiper: function (item) {
      console.log(item)
      this.info = item.data
      this.isshowvideo = true
    },
    closeVideo: function () {
      this.isshowvideo = false
    }
  }
}
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root {
  background: url(~@/assets/chuantongwenhua/bg.png);
}
.root > div {
  position: absolute; 
}
.root > div {
  position: absolute; 
}
.home {
  top: 54px;
  left: 57px;
}
.back {
  top: 153px;
  left: 57px;
}
.minzuyinyue {
  top: 150px;
  left: 280px;
}
.xiangqibingfa {
  top: 140px;
  left: 580px;
}
.dizigui {
  top: 130px;
  left: 855px;
}
.lunhua {
  top: 400px;
  left: 300px;
}
.wushu {
  top: 410px;
  left: 580px;
}
.baijiaxing {
  top: 400px;
  left: 870px;
}
</style>
